<template>
	<view class="content">
		<!-- 头部 -->
		<view class="aa">
			<singerlist :title="'分类(默认热门) : '" :list="categoryTypes" @add="add"></singerlist>
		</view>
		<view class="aa">
			<singerlist :title="'首字母 : '" :list="alphaTypes" @add="add"></singerlist>
		</view>
		<!-- 内容 -->
			<musicList 
			  v-for="(item,index) in list" :key="index"
			  @click.native="addid(item.id)"
			 :img="item.img1v1Url"
			 :nameValue="item.name" 
			 ></musicList>
	</view>
</template>
<script>
	import {
		Singer
	} from '../../api/singer.js'
	import singerlist from '../../components/singerlist/singerlist.vue'
	import musicList from '../../components/musicList/musicList.vue'
	export default {
		components: {
			singerlist,
			musicList
		},
		data() {
			return {
				list: [],
				// 请求参数
				obj: {
					// limit: 30, //默认30条
					offset: '', //页数
					initial: '', //按首字母索引查找参数
					type: '', //分类
					area: '' //首字母
				},
				// 歌手分类表
				categoryTypes: [{
						name: "华语男",
						key: "1001"
					},
					{
						name: "华语女",
						key: "1002"
					},
					{
						name: "华语组合",
						key: "1003"
					},
					{
						name: "欧美男",
						key: "2001"
					},
					{
						name: "欧美女",
						key: "2002"
					},
					{
						name: "欧美组合",
						key: "2003"
					},
					{
						name: "日本男",
						key: "6001"
					},
					{
						name: "日本女",
						key: "6002"
					},
					{
						name: "日本组合",
						key: "6003"
					},
					{
						name: "韩国男",
						key: "7001"
					},
					{
						name: "韩国女",
						key: "7002"
					},
					{
						name: "韩国组合",
						key: "7003"
					},
					{
						name: "其他男歌手",
						key: "4001"
					},
					{
						name: "其他女歌手",
						key: "4002"
					},
					{
						name: "其他组合",
						key: "4003"
					},
				],
				//歌手首字母
				alphaTypes: [{
						key: "A",
						name: "A"
					},
					{
						key: "B",
						name: "B"
					},
					{
						key: "C",
						name: "C"
					},
					{
						key: "D",
						name: "D"
					},
					{
						key: "E",
						name: "E"
					},
					{
						key: "F",
						name: "F"
					},
					{
						key: "G",
						name: "G"
					},
					{
						key: "H",
						name: "H"
					},
					{
						key: "I",
						name: "I"
					},
					{
						key: "J",
						name: "J"
					},
					{
						key: "K",
						name: "K"
					},
					{
						key: "L",
						name: "L"
					},
					{
						key: "M",
						name: "M"
					},
					{
						key: "N",
						name: "N"
					},
					{
						key: "O",
						name: "O"
					},
					{
						key: "P",
						name: "P"
					},
					{
						key: "Q",
						name: "Q"
					},
					{
						key: "R",
						name: "R"
					},
					{
						key: "S",
						name: "S"
					},
					{
						key: "T",
						name: "T"
					},
					{
						key: "U",
						name: "U"
					},
					{
						key: "V",
						name: "V"
					},
					{
						key: "W",
						name: "W"
					},
					{
						key: "X",
						name: "X"
					},
					{
						key: "Y",
						name: "Y"
					},
					{
						key: "Z",
						name: "Z"
					}
				],
			}
		},
		mounted() {
			this.singer()
		},
		methods: {
			// 封装请求
			singer(){
				Singer(this.obj).then(res => {
					// console.log(res)
					this.list = res.data.artists
				})
			},
			addid(id){
				// console.log(id)
				// uni.setStorageSync('name',item.name)
				uni.navigateTo({
					url:`/pages/singerList/singerList?id=${id}`,
				})
			},			
			// 点击请求
           add(i){
			   // console.log(i)
			   // console.log(i.slice(3))//截取数字最后一位
			   // console.log(i.slice(0,1))//截取数字第一位
			   // toLowerCase
			   // console.log( i.toLowerCase())//字母转小写
			   if(i.length==4){
				   let left=i.slice(0,1)
				   let right=i.slice(3)
				   if(left=='1'){
					   this.obj.area=7
				   }else if(left=='2'){
					    this.obj.area=96
				   }else if(left=='6'){
					    this.obj.area=8
				   }else if(left=='7'){
					    this.obj.area=16
				   }else{
					    this.obj.area=0
				   }
				   this.obj.type=Number(right)
			   }else{
				    this.obj.initial=i.toLowerCase()
			   }
			   // console.log(this.obj)
			    this.singer()
		   }
		}
	}
</script>
<style>
</style>
